<template>
    
    <div id="app">
        <div class="add">
            品牌名称:<input type="text" v-model='bname'>
            添加日期:<input type="datetime-local" v-model='bdate'>
            <input type="button" value="添加"  @click='add'>
        </div>
        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>
        <div>
            <table class="tb">
                <tbody>
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(value,index) in brandList" :key="value.id">
                        <td>{{index+1}} </td>
                        <td>{{value.bname}} </td>
                        <td>{{value.bdate}} </td>
                        <td>
                            <a href="#" @click.prevent="del(value.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
         return {
        brandList: [{
        id: 1,
        bname: 'QQ',
        bdate: '2021-5-2'
      }, {
        id: 2,
        bname: 'BMW',
        bdate: '2021-4-2'
      }, {
        id: 3,
        bname: 'BYD',
        bdate: '2021-3-2'
      }],
    bname:'',
    bdate:'',
    id:'4'
        }
    },
    methods:{
        add(){
            console.log(this);
            this.brandList.push({
                id:this.id,
                bname:this.bname,
                bdate:this.bdate
            })
            this.id++;
        },
        del(id){
            console.log(this.id);
            this.brandList=this.brandList.filter(v=>{
                return v!==this.id
            })
        }
    },
}
</script>
<style>
 #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
</style>